<div class="layui-fluid layui-anim febs-anim" id="febs-breakageStat" lay-title="报损统计">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <div class="b">
                        <div class="h">
                            <h1>报损统计</h1>
                            <div class="showTime">当前时间：2021年1月5-0时54分14秒</div>
                            <script>
                                var t = null;
                                t = setTimeout(time, 1000); //開始运行
                                function time() {
                                    clearTimeout(t); //清除定时器
                                    dt = new Date();
                                    var y = dt.getFullYear();
                                    var mt = dt.getMonth() + 1;
                                    var day = dt.getDate();
                                    var h = dt.getHours(); //获取时
                                    var m = dt.getMinutes(); //获取分
                                    var s = dt.getSeconds(); //获取秒
                                    document.querySelector(".showTime").innerHTML =
                                        "当前时间：" +
                                        y +
                                        "年" +
                                        mt +
                                        "月" +
                                        day +
                                        "-" +
                                        h +
                                        "时" +
                                        m +
                                        "分" +
                                        s +
                                        "秒";
                                    t = setTimeout(time, 1000); //设定定时器，循环运行
                                }
                            </script>
                        </div>
                        <h3 class="switchYear"
                            style="text-align: center;font-size: 24px;font-weight: bold;color: #aaaaaa;margin-top: 10px">
                            <a href="javascript:;">2020</a>
                            <a href="javascript:;">2021</a>
                        </h3>
                        <div class="mainbox">
                            <div class="column">
                                <div class="panel bar">
                                    <div class="chart c1"></div>
                                    <div class="panel-footer"></div>
                                </div>
                            </div>
                            <div class="c">
                                <div class="panel line">
                                    <div class="chart c2"></div>
                                    <div class="panel-footer"></div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="panel pie1">
                                    <div class="chart c3"></div>
                                    <div class="panel-footer"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script data-th-inline="none" type="text/javascript">
                        var $ = layui.jquery;
                        var yearOld = {year: new Date().getFullYear()};

                        $(".switchYear").on("click", "a", function () {
                            yearOld.year = $(this).html();
                            f1();
                            f2();
                            f3();
                        });

                        function f1() {
                            // 实例化对象
                            var myChart1 = echarts.init(document.querySelector(".c1"));
                            // 指定配置和数据
                            var option = {
                                color: ["#2f89cf"],
                                title: {
                                    text: '书籍类型统计',
                                    left: 'left',
                                    top: 6,
                                    textStyle: {
                                        color: '#ccc',
                                        fontSize: 12
                                    }
                                },
                                tooltip: {
                                    trigger: "axis",
                                },
                                toolbox: {
                                    show: true,
                                    itemSize:12,
                                    feature: {
                                        dataZoom: {
                                            yAxisIndex: 'none'
                                        },
                                        dataView: {readOnly: false},
                                        magicType: {type: ['line', 'bar']},
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                grid: {
                                    left: "0%",
                                    top: "40px",
                                    right: "0%",
                                    bottom: "4%",
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: "category",
                                        data: [],
                                        axisTick: {
                                            show: false
                                        },
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: "rgba(255,255,255,.6)",
                                                fontSize: "12"
                                            }
                                        },
                                        axisLine: {
                                            show: false
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: "value",
                                        axisLabel: {
                                            textStyle: {
                                                color: "rgba(255,255,255,.6)",
                                                fontSize: "12"
                                            }
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: "rgba(255,255,255,.1)"
                                                // width: 1,
                                                // type: "solid"
                                            }
                                        },
                                        splitLine: {
                                            lineStyle: {
                                                color: "rgba(255,255,255,.1)"
                                            }
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: "直接访问",
                                        type: "bar",
                                        barWidth: "35%",
                                        data: [],
                                        itemStyle: {
                                            barBorderRadius: 5
                                        }
                                    }
                                ]
                            };

                            // 把配置给实例对象
                            myChart1.setOption(option);
                            window.addEventListener("resize", function () {
                                myChart1.resize();
                            });


                            var names = [];    //类别数组（实际用来盛放X轴坐标值）
                            var nums = [];    //销量数组（实际用来盛放Y坐标值）

                            a();

                            function a() {
                                $.ajax({
                                    type: "get",
                                    url: ctx + 'breakageStat/column/' + yearOld.year,
                                    dataType: 'JSON',
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    success: function (res) {
                                        var data = res.data;
                                        var set = new Set();
                                        for (let i in data) {
                                            names.push(data[i].bookname);
                                            nums.push(data[i].number);
                                        }
                                        myChart1.setOption({        //加载数据图表
                                            xAxis: {
                                                name: "种类",
                                                data: names
                                            },
                                            series: [{
                                                // 根据名字对应到相应的系列
                                                data: nums
                                            }]
                                        });
                                    }
                                });
                                nums.length = 0;
                                names.length = 0;
                            }
                        }

                        function f2() {
                            $.ajax({
                                type: "get",
                                url: ctx + 'breakageStat/line/' + yearOld.year,
                                dataType: 'JSON',
                                cache: false,
                                contentType: "application/json;charset=utf-8",
                                success: function (res) {
                                    var data = res.data;

                                    // 基于准备好的dom，初始化echarts实例
                                    var myChart2 = echarts.init(document.querySelector(".c2"));

                                    // 2. 指定配置和数据
                                    var option = {
                                        color: ["#00f2f1", "#ed3f35", "yellow"],
                                        title: {
                                            text: '月份统计',
                                            left: 'left',
                                            top: 6,
                                            textStyle: {
                                                color: '#ccc',
                                                fontSize: 12
                                            }
                                        },
                                        tooltip: {
                                            // 通过坐标轴来触发
                                            trigger: "axis"
                                        },
                                        toolbox: {
                                            show: true,
                                            itemSize:12,
                                            feature: {
                                                dataZoom: {
                                                    yAxisIndex: 'none'
                                                },
                                                dataView: {readOnly: false},
                                                magicType: {type: ['bar', 'line']},
                                                restore: {},
                                                saveAsImage: {}
                                            }
                                        },
                                        legend: {
                                            top:"25px",
                                            // 距离容器10%
                                            right: "10%",
                                            // 修饰图例文字的颜色
                                            textStyle: {
                                                color: "#4c9bfd"
                                            }
                                            // 如果series 里面设置了name，此时图例组件的data可以省略
                                            // data: ["邮件营销", "联盟广告"]
                                        },
                                        grid: {
                                            top: "20%",
                                            left: "0%",
                                            right: "4%",
                                            bottom: "5%",
                                            show: true,
                                            borderColor: "#012f4a",
                                            containLabel: true
                                        },
                                        xAxis: {
                                            type: "category",
                                            boundaryGap: false,
                                            data: [
                                                "1月",
                                                "2月",
                                                "3月",
                                                "4月",
                                                "5月",
                                                "6月",
                                                "7月",
                                                "8月",
                                                "9月",
                                                "10月",
                                                "11月",
                                                "12月"
                                            ],
                                            // 去除刻度
                                            axisTick: {
                                                show: false
                                            },
                                            // 修饰刻度标签的颜色
                                            axisLabel: {
                                                interval: 0,
                                                color: "rgba(255,255,255,.7)"
                                            },
                                            // 去除x坐标轴的颜色
                                            axisLine: {
                                                show: false
                                            },
                                        },
                                        yAxis: {
                                            color: "#012f4a",
                                            type: "value",
                                            // 去除刻度
                                            axisTick: {
                                                show: false
                                            },
                                            // 修饰刻度标签的颜色
                                            axisLabel: {
                                                color: "rgba(255,255,255,.7)"
                                            },
                                            // 修改y轴分割线的颜色
                                            splitLine: {
                                                lineStyle: {
                                                    color: "#012f4a"
                                                }
                                            }
                                        },
                                        series: [
                                            {
                                                name: "正常损坏",
                                                type: "line",
                                                // stack: "总量",
                                                // 是否让线条圆滑显示
                                                smooth: true,
                                                data: data[0]
                                            },
                                            {
                                                name: "退书损坏",
                                                type: "line",
                                                // stack: "总量",
                                                smooth: true,
                                                data: data[1]
                                            },
                                            {
                                                name: "意外损坏",
                                                type: "line",
                                                // stack: "总量",
                                                smooth: true,
                                                data: data[2]
                                            }
                                        ]
                                    };
                                    // 3. 把配置和数据给实例对象
                                    myChart2.setOption(option);
                                    window.addEventListener("resize", function () {
                                        myChart2.resize();
                                    });
                                }
                            });
                        }

                        function f3() {
                            // 基于准备好的dom，初始化echarts实例
                            var myChart3 = echarts.init(document.querySelector(".c3"));

                            option = {
                                title: {
                                    text: '报损类型统计',
                                    left: 'left',
                                    top: 6,
                                    textStyle: {
                                        color: '#ccc',
                                        fontSize: 12
                                    }
                                },
                                tooltip: {
                                    trigger: "item",
                                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                                    position: function (p) {
                                        //其中p为当前鼠标的位置
                                        return [p[0] + 10, p[1] - 10];
                                    }
                                },
                                toolbox: {
                                    show: true,
                                    itemSize:12,
                                    feature: {
                                        dataZoom: {
                                            yAxisIndex: 'none'
                                        },
                                        dataView: {readOnly: false},
                                        restore: {},
                                        saveAsImage: {}
                                    },
                                    /*iconStyle:{
                                        normal:{
                                            color: ["#00f2f1", "#ed3f35", "yellow","green"],
                                        }
                                    }*/
                                },
                                legend: {
                                    top: "90%",
                                    itemWidth: 10,
                                    itemHeight: 10,
                                    data: [],
                                    textStyle: {
                                        color: "rgba(255,255,255,.5)",
                                        fontSize: "12"
                                    }
                                },
                                series: [
                                    {
                                        name: "报损统计",
                                        type: "pie",
                                        center: ["50%", "42%"],
                                        radius: ["40%", "60%"],
                                        color: ["#00f2f1", "#ed3f35", "yellow"],
                                        label: {show: false},
                                        labelLine: {show: false},
                                        data: []
                                    }
                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart3.setOption(option);
                            window.addEventListener("resize", function () {
                                myChart3.resize();
                            });
                            var str = [];
                            c();

                            function c() {
                                $.ajax({
                                    type: "get",
                                    url: ctx + 'breakageStat/pctn/' + yearOld.year,
                                    dataType: 'JSON',
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    success: function (res) {
                                        var data = res.data;
                                        for (let dataKey in data) {
                                            str.push({
                                                name: data[dataKey].typename,
                                                value: data[dataKey].number
                                            })
                                        }
                                        myChart3.setOption({        //加载数据图表
                                            series: [{
                                                data: str
                                            }]
                                        });
                                    }
                                });
                                str.length = 0;
                            }
                        }

                        f1();
                        f2();
                        f3();
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


